import { useContext, memo, useMemo } from 'react';
import { useCountState } from "./../../store/index"
import { MyContext } from "./../../App"

const btnStyle = {
    margin: '1rem'
}

export default memo(function () {

    console.log("User 组件函数执行了")

    const [count, setCount] = useCountState()

    const contextValue = useContext(MyContext);

    const useMemo1 = useMemo(() => {
        console.log('useMemo执行回调了，每次组件更新都会执行')
        return '1111'
    })
    const useMemo2 = useMemo(() => {
        console.log('useMemo执行回调了，首次渲染执行，此后的更新不会执行')
        return '1111'
    }, [])
    const useMemo3 = useMemo(() => {
        console.log('useMemo执行回调了，首次渲染执行，此后的更新，只有依赖的数据更新才会执行')
        return '1111'
    }, [contextValue.name])

    return (
        <div>
            User Page
            <div style={btnStyle}>{contextValue.name}{contextValue.age}</div>
            <strong style={btnStyle} >{count}</strong>
            <button style={btnStyle} onClick={() => setCount(count + 1)}>增加</button>
            <button style={btnStyle} onClick={() => setCount(count - 1)}>减少</button>
        </div>
    );
})
